<template>
  <section>

    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
    <el-form :inline="true" :model="filters1">
      <el-form-item>
        <el-button type="primary" @click="handleAdd1">新增</el-button>
      </el-form-item>
    </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="listData1" highlight-current-row v-loading="listLoading1" @selection-change="selsChange1"
              style="width: 100%;"
              @row-dblclick="clickData">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column type="index" width="60">
    </el-table-column>
    <el-table-column prop="name" label="数据字典名"  width="500"/>
    <el-table-column prop="sn" label="编号" width="500" >
    </el-table-column>
    <el-form-item>
      <el-button type="primary" @click="handleAdd1">新增</el-button>
    </el-form-item>
    <el-table-column label="操作" width="150">
      <template scope="scope">
        <el-button size="small" @click="handleEdit1(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDel1(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

    <!--新增界面-->
    <el-dialog :title="title1" :visible.sync="addFormVisible1" :close-on-click-modal="false">
    <el-form :model="addForm1" label-width="80px" :rules="addFormRules1" ref="addForm1">
      <el-form-item label="数据字典" >
        <el-input v-model="addForm1.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="编号" >
        <el-input v-model="addForm1.sn" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="addFormVisible1 = false">取消</el-button>
      <el-button type="primary" @click.native="addSubmit1" :loading="addLoading1">提交</el-button>
    </div>
    </el-dialog>

    <!--分页工具条-->
    <el-col :span="24" class="toolbar">
    <el-pagination layout="total, sizes,prev, pager, next"
                   @size-change="handleSizeChange1"
                   @current-change="handleCurrentChange1"
                   :page-sizes="[5, 10, 20, 50]"
                   :page-size="pageSize1"
                   :total="total1" style="float:right;">
    </el-pagination>
    </el-col>

    <!--抽屉-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters2">
      </el-form>
    </el-col>
    <el-drawer
        title="明细表格!"
        :visible.sync="table2"
        direction="rtl"
        size="50%">
      <el-button type="primary" @click="handleAdds2">新增</el-button>
      <el-table :data="gridData2">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" width="100">
        </el-table-column>
        <el-table-column prop="name" label="明细名" width="300" >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template scope="scope">
            <el-button size="small" @click="handleEdits2(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDels2(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增界面-->
      <el-dialog :title="title2" :visible.sync="addFormVisible2" :close-on-click-modal="false" append-to-body>
        <el-form :model="addForm2" label-width="80px" :rules="addFormRules2" ref="addForm2">
          <el-form-item label="明细" >
            <el-input v-model="addForm2.name" auto-complete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible2 = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit2" :loading="addLoading2">提交</el-button>
        </div>
      </el-dialog>

      <!--分页工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination layout="total, sizes,prev, pager, next"
                       @size-change="handleSizeChanges2"
                       @current-change="handleCurrentChanges2"
                       :page-sizes="[5, 10, 20, 50]"
                       :page-size="pageSize2"
                       :total="total2" style="float:right;">
        </el-pagination>
      </el-col>

    </el-drawer>


  </section>
</template>


<script>
import { getUserList } from '../../api/api';
//import NProgress from 'nprogress'
export default {
  data() {
    return{
      types_id:null,
      ////222222
      filters2:{

      },
      table2:false,
      gridData2:[],
      title2:"",
      addForm2:{
        name: '',
        types_id: '',
      },
      addFormRules2:{

      },
      pageSize2:5,
      total2:1,
      sels2:[],
      addLoading2:false,
      addFormVisible2:false,

      ///////111
      filters1:[],
      listData1:[],
      listLoading1:false,
      title1:"",
      addForm1:{

      },
      addFormVisible1:false,
      addFormRules1:false,
      addLoading1:false,
      pageSize1:10,
      total1:1,
      sels1:[],
    }
  },

  methods:{
    handleSizeChanges2(val){
      this.pageSize2 = val;
      this.loadListData2()
    },
    handleCurrentChanges2(val){
      this.page = val;
      this.loadListData2()
    },
    addSubmit2(){
      this.$refs.addForm2.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading2 = true;
            this.addForm2.types_id = this.types_id
            this.$http.put("/systail",this.addForm2).then(res=>{
              //关闭按钮加载
              this.addLoading2 = false;
              let {success,message} = res.data;
              if (success){
                this.$message({
                  message:"操作成功！！！",
                  type:"success"
                });
              }else {
                this.$message.error("网络繁忙，请重试！！！")
              }
              //关闭模态框
              this.addFormVisible2 = false;
              this.loadListData2();
            })

          });
        }
      });
    },
    handleDels2(index, row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.listLoading = true;
        this.$http.delete("/systail/"+row.id).then(res=>{
          debugger
          let {success,message} = res.data;
          if (success){
            this.$message({
              message:"删除成功！！！",
              type:"success"
            });
          }else {
            this.$message.error("网络繁忙，请重试！！！")
          }
          this.loadListData2();
        })
      }).catch(res=>{
        this.$message('取消删除！！！');
      })
    },
    handleEdits2(index,row){
      this.addForm2 = Object.assign({},row);
      //打开模态框
      this.addFormVisible2 = true;
      this.title = "修改"
    },
    handleAdds2(){
      this.addForm2 = {
        name: '',
        types_id: '',
      }
      this.addFormVisible2 = true;
      this.titles = ("新增");
    },
    loadListData2(){
      let faram = {
        currentPage:this.page,
        pageSize:this.pageSize2,
        types_id: this.types_id
      }
      this.$http.post("/systail",faram).then(res=>{
        this.gridData2 = res.data.data;
        this.total2 = res.data.totals;
      })

    },
    clickData(row, event, column){
      this.page = 1
      this.types_id = row.id
      this.loadListData2()
      this.table2 = true;
    },




    //主页

    handleCurrentChange1(val){
      this.page = val;
      this.loadListData1();
    },
    handleSizeChange1(val){
      this.pageSize1 = val;
      this.loadListData1();
    },
    addSubmit1(){
      this.$refs.addForm1.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true;
            this.$http.put("/systype",this.addForm1).then(res=>{
              //关闭按钮加载
              this.addLoading1 = false;
              let {success,message} = res.data;
              if (success){
                this.$message({
                  message:"操作成功！！！",
                  type:"success"
                });
              }else {
                this.$message.error("网络繁忙，请重试！！！")
              }
              //关闭模态框
              this.addFormVisible1 = false;
              this.loadListData1();
            })

          });
        }
      });
    },
    handleDel1(index,row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading1 = true;
        this.$http.delete("/systype/"+row.id).then(row=>{
          let {success,message} = row.data;
          if (success){
            this.$message({
              message:"删除成功！！！",
              type:"success"
            });
          }else {
            this.$message.error("网络繁忙，请重试！！！")
          }
          //刷新列表
          this.loadListData1();
        })

      }).catch(() => {
        this.$message('取消删除！！！');
      });
    },
    handleEdit1(index,row){
      this.addForm1 = Object.assign({},row);
      //打开模态框
      this.addFormVisible1 = true;
      this.title1 = "修改"
    },
    selsChange1(val){
      this.sels1 = val;
    },
    handleAdd1(){
      this.addForm1 = {
        name: '',
        sn: '',
      }
      this.addFormVisible1 = true;
      this.title1 = ("新增");
    },
    loadListData1(){
      let faram = {
        currentPage:this.page,
        pageSize:this.pageSize1,
        keywords:this.filters1.name
      }
      this.$http.post("systype",faram).then(res=>{
        this.listData1 = res.data.data;
        this.listLoading1 = false;
        this.total1 = res.data.totals;
      })

    },

  },
  mounted() {
    this.loadListData1();
    this.loadListData2  ();
  }
}


</script>

<style scoped>

</style>